<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模型更新 - 转炉终点预测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="styles/unified.css">
    <link rel="stylesheet" href="styles/components.css">
    <link rel="stylesheet" href="styles/sidebar-theme.css">
    <link rel="stylesheet" href="styles/model-pages.css">
    <link rel="stylesheet" href="styles/scale-fix.css">
    <link rel="stylesheet" href="styles/modal-dialog.css">
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <div class="sidebar-logo">
                <i class="fas fa-industry"></i>
            </div>
            <div class="sidebar-title">转炉终点预测系统</div>
        </div>
        <div class="sidebar-menu">
            <div class="sidebar-menu-title">主导航</div>
            <ul>
                <li><a href="index.html"><i class="fas fa-home"></i>首页</a></li>
                
                <li><a href="production-monitor.html"><i class="fas fa-chart-line"></i>生产监控</a></li>
                <li><a href="history-data.html"><i class="fas fa-history"></i>历史数据</a></li>
                <li><a href="quality-analysis.html"><i class="fas fa-flask"></i>质量分析</a></li>
            </ul>
            
            <div class="sidebar-menu-title">模型管理</div>
            <ul>
                <li><a href="model-details.html"><i class="fas fa-brain"></i>模型详情</a></li>
                <li><a href="model-config.html"><i class="fas fa-cogs"></i>模型配置</a></li>
                <li><a href="model-performance.html"><i class="fas fa-chart-bar"></i>模型性能</a></li>
                <li><a href="model-update.html" class="active"><i class="fas fa-sync-alt"></i>模型更新</a></li>
            </ul>
            
            <div class="sidebar-menu-title">系统设置</div>
            <ul>
                <li><a href="system-settings.html"><i class="fas fa-cog"></i>系统设置</a></li>
                <li><a href="online-analysis.html"><i class="fas fa-chart-bar"></i>在线分析</a></li>
            </ul>
        </div>
        <div class="sidebar-footer">
            <i class="fas fa-info-circle"></i>
            <span>系统版本：v2.5.3</span>
        </div>
    </div>

    <!-- 侧边栏遮罩层 -->
    <div class="sidebar-overlay"></div>

    <div class="container">
        <div class="header">
            <div class="header-left">
                <div>
                    <div class="title">模型更新</div>
                    <div class="subtitle">管理模型版本和更新</div>
                </div>
            </div>
            <div class="header-actions">
                <button class="btn btn-primary" id="create-version">
                    <i class="fas fa-plus"></i>
                    创建新版本
                </button>
            </div>
        </div>

        <div class="content-wrapper">
            <!-- 模型版本卡片 -->
            <div class="update-grid">
                <div class="version-card">
                    <div class="version-header">
                        <div class="version-icon">
                            <i class="fas fa-check"></i>
                        </div>
                        <div class="version-info">
                            <div class="version-number">版本 3.2.1</div>
                            <div class="version-date">2023-05-20 发布</div>
                        </div>
                        <span class="version-status current">当前版本</span>
                    </div>
                    
                    <div class="version-features">
                        <div class="feature-item">
                            <i class="fas fa-check-circle"></i>
                            <div class="feature-text">优化温度预测算法，提高±5℃内准确率14.2%</div>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-check-circle"></i>
                            <div class="feature-text">添加特征重要性分析功能</div>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-check-circle"></i>
                            <div class="feature-text">优化推理性能，降低推理时间35%</div>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-check-circle"></i>
                            <div class="feature-text">修复冷却曲线预测异常问题</div>
                        </div>
                    </div>
                    
                    <div class="version-metrics">
                        <div class="metric-item">
                            <div class="metric-label">温度RMSE</div>
                            <div class="metric-value">±8.63℃</div>
                        </div>
                        <div class="metric-item">
                            <div class="metric-label">碳含量RMSE</div>
                            <div class="metric-value">±0.0076%</div>
                        </div>
                        <div class="metric-item">
                            <div class="metric-label">时间准确率</div>
                            <div class="metric-value">92.4%</div>
                        </div>
                        <div class="metric-item">
                            <div class="metric-label">推理时间</div>
                            <div class="metric-value">120ms</div>
                        </div>
                    </div>
                    
                    <div class="version-actions">
                        <button class="btn btn-secondary">
                            <i class="fas fa-download"></i>
                            导出模型
                        </button>
                        <button class="btn btn-secondary">
                            <i class="fas fa-file-alt"></i>
                            查看文档
                        </button>
                        <button class="btn btn-primary" disabled>
                            <i class="fas fa-check"></i>
                            已部署
                        </button>
                    </div>
                </div>
                
                <div class="version-card">
                    <div class="version-header">
                        <div class="version-icon">
                            <i class="fas fa-flask"></i>
                        </div>
                        <div class="version-info">
                            <div class="version-number">版本 3.3.0</div>
                            <div class="version-date">开发中</div>
                        </div>
                        <span class="version-status dev">开发版</span>
                    </div>
                    
                    <div class="version-features">
                        <div class="feature-item">
                            <i class="fas fa-check-circle"></i>
                            <div class="feature-text">集成时序特征提取模块</div>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-check-circle"></i>
                            <div class="feature-text">添加不确定性估计功能</div>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-spinner"></i>
                            <div class="feature-text">正在开发：改进碳含量预测模型</div>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-spinner"></i>
                            <div class="feature-text">正在开发：增加异常工况检测能力</div>
                        </div>
                    </div>
                    
                    <div class="progress-section">
                        <div class="subtitle">训练进度</div>
                        <div class="progress-container">
                            <div class="progress">
                                <div class="progress-bar" style="width: 65%;"></div>
                            </div>
                            <div class="progress-stats">
                                <span>已完成 65%</span>
                                <span>预计完成时间: 3小时12分钟</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="version-actions">
                        <button class="btn btn-secondary">
                            <i class="fas fa-eye"></i>
                            查看详情
                        </button>
                        <button class="btn btn-primary">
                            <i class="fas fa-play"></i>
                            继续训练
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 创建新版本向导 -->
            <div class="card" id="version-wizard" style="display: none;">
                <div class="card-header">
                    <div class="card-title">
                        <i class="fas fa-magic"></i>
                        创建新版本
                    </div>
                    <div class="card-actions">
                        <button class="btn btn-secondary" id="cancel-wizard">
                            <i class="fas fa-times"></i>
                            取消
                        </button>
                    </div>
                </div>
                
                <div class="step-wizard">
                    <div class="step completed">
                        <div class="step-circle">
                            <i class="fas fa-check"></i>
                        </div>
                        <div class="step-title">选择基础版本</div>
                    </div>
                    <div class="step active">
                        <div class="step-circle">2</div>
                        <div class="step-title">选择数据集</div>
                    </div>
                    <div class="step">
                        <div class="step-circle">3</div>
                        <div class="step-title">配置参数</div>
                    </div>
                    <div class="step">
                        <div class="step-circle">4</div>
                        <div class="step-title">训练模型</div>
                    </div>
                    <div class="step">
                        <div class="step-circle">5</div>
                        <div class="step-title">评估部署</div>
                    </div>
                </div>
                
                <div class="step-content active">
                    <div class="subtitle">选择训练数据集</div>
                    <p>选择用于训练新模型的数据集，或上传新的数据集</p>
                    
                    <div class="file-upload">
                        <i class="fas fa-cloud-upload-alt"></i>
                        <div class="file-upload-title">拖放文件到这里或点击上传</div>
                        <div class="file-upload-subtitle">支持.csv, .xlsx格式，最大文件大小50MB</div>
                    </div>
                    
                    <div class="table-container">
                        <table class="performance-table">
                            <thead>
                                <tr>
                                    <th>数据集名称</th>
                                    <th>样本数量</th>
                                    <th>时间范围</th>
                                    <th>最后更新</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>生产数据集（2023Q1-Q2）</td>
                                    <td>12,856</td>
                                    <td>2023-01-01 至 2023-06-30</td>
                                    <td>2023-07-05</td>
                                    <td>
                                        <button class="btn btn-sm btn-primary">选择</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>基准测试数据集</td>
                                    <td>5,432</td>
                                    <td>2022-01-01 至 2022-12-31</td>
                                    <td>2023-01-15</td>
                                    <td>
                                        <button class="btn btn-sm btn-primary">选择</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>特殊工况数据集</td>
                                    <td>1,824</td>
                                    <td>2021-01-01 至 2023-06-30</td>
                                    <td>2023-07-01</td>
                                    <td>
                                        <button class="btn btn-sm btn-primary">选择</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="card-actions">
                        <button class="btn btn-secondary">上一步</button>
                        <button class="btn btn-primary">下一步</button>
                    </div>
                </div>
            </div>
            
            <!-- 日志和对比部分放入选项卡中 -->
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <i class="fas fa-file-alt"></i>
                        训练日志与性能对比
                    </div>
                </div>
                
                <div class="tabs">
                    <button class="tab-btn active" data-tab="logs">训练日志</button>
                    <button class="tab-btn" data-tab="comparison">版本对比</button>
                </div>
                
                <!-- 最近训练日志选项卡 -->
                <div class="tab-content active" id="logs-tab">
                    <div class="card-actions" style="margin-bottom: 15px;">
                        <button class="btn btn-secondary">
                            <i class="fas fa-download"></i>
                            导出日志
                        </button>
                    </div>
                    
                    <div class="training-log">
                        <div class="log-entry">
                            <span class="log-time">[2023-07-15 14:32:15]</span>
                            <span class="log-info">INFO: 开始训练模型版本 3.3.0</span>
                        </div>
                        <div class="log-entry">
                            <span class="log-time">[2023-07-15 14:32:18]</span>
                            <span class="log-info">INFO: 加载数据集 'production_data_2023Q1Q2.csv'，包含12856条记录</span>
                        </div>
                        <div class="log-entry">
                            <span class="log-time">[2023-07-15 14:32:25]</span>
                            <span class="log-info">INFO: 数据预处理：缺失值填充，异常值检测与处理</span>
                        </div>
                        <div class="log-entry">
                            <span class="log-time">[2023-07-15 14:32:40]</span>
                            <span class="log-info">INFO: 特征工程：生成时序特征，标准化特征</span>
                        </div>
                        <div class="log-entry">
                            <span class="log-time">[2023-07-15 14:33:10]</span>
                            <span class="log-info">INFO: 数据集分割：训练集70%，验证集15%，测试集15%</span>
                        </div>
                        <div class="log-entry">
                            <span class="log-time">[2023-07-15 14:33:15]</span>
                            <span class="log-info">INFO: 初始化模型结构：集成时序特征提取模块</span>
                        </div>
                        <div class="log-entry">
                            <span class="log-time">[2023-07-15 14:33:30]</span>
                            <span class="log-info">INFO: 开始训练 Epoch 1/100</span>
                        </div>
                        <div class="log-entry">
                            <span class="log-time">[2023-07-15 14:35:45]</span>
                            <span class="log-info">INFO: Epoch 1/100 完成 - 训练损失: 0.0856, 验证损失: 0.0921</span>
                        </div>
                        <div class="log-entry">
                            <span class="log-time">[2023-07-15 14:35:50]</span>
                            <span class="log-info">INFO: 开始训练 Epoch 2/100</span>
                        </div>
                        <div class="log-entry">
                            <span class="log-time">[2023-07-15 14:38:05]</span>
                            <span class="log-info">INFO: Epoch 2/100 完成 - 训练损失: 0.0782, 验证损失: 0.0845</span>
                        </div>
                        <div class="log-entry">
                            <span class="log-time">[2023-07-15 14:38:10]</span>
                            <span class="log-warning">WARNING: 学习率调整：从0.001降至0.0008</span>
                        </div>
                        <div class="log-entry">
                            <span class="log-time">[2023-07-15 14:38:15]</span>
                            <span class="log-info">INFO: 开始训练 Epoch 3/100</span>
                        </div>
                        <div class="log-entry">
                            <span class="log-time">[2023-07-15 14:40:30]</span>
                            <span class="log-info">INFO: Epoch 3/100 完成 - 训练损失: 0.0723, 验证损失: 0.0801</span>
                        </div>
                        <div class="log-entry">
                            <span class="log-time">[2023-07-15 14:40:35]</span>
                            <span class="log-success">SUCCESS: 保存当前最佳模型检查点 - 验证损失: 0.0801</span>
                        </div>
                    </div>
                </div>
                
                <!-- 版本对比选项卡 -->
                <div class="tab-content" id="comparison-tab" style="display: none;">
                    <div class="comparison-chart">
                        <div class="chart-placeholder">
                            <i class="fas fa-chart-line" style="font-size: 2rem; margin-bottom: 10px; color: var(--primary-color);"></i>
                            <div>版本性能对比图</div>
                            <div style="margin-top: 5px; font-size: 0.9rem; color: var(--gray);">
                                X轴: 模型版本 | 蓝线: 温度RMSE | 绿线: 碳含量RMSE | 橙线: 时间准确率
                            </div>
                        </div>
                    </div>
                    
                    <div class="grid-2">
                        <div>
                            <div class="subtitle">当前版本 (v3.2.1) 与上一版本对比</div>
                            <table class="performance-table">
                                <thead>
                                    <tr>
                                        <th>指标</th>
                                        <th>v3.1.5</th>
                                        <th>v3.2.1</th>
                                        <th>变化</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>温度RMSE</td>
                                        <td>±9.84℃</td>
                                        <td>±8.63℃</td>
                                        <td style="color: var(--success-color);">↑12.3%</td>
                                    </tr>
                                    <tr>
                                        <td>碳含量RMSE</td>
                                        <td>±0.0083%</td>
                                        <td>±0.0076%</td>
                                        <td style="color: var(--success-color);">↑8.5%</td>
                                    </tr>
                                    <tr>
                                        <td>时间准确率</td>
                                        <td>87.8%</td>
                                        <td>92.4%</td>
                                        <td style="color: var(--success-color);">↑5.2%</td>
                                    </tr>
                                    <tr>
                                        <td>推理时间</td>
                                        <td>185ms</td>
                                        <td>120ms</td>
                                        <td style="color: var(--success-color);">↓35%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div>
                            <div class="subtitle">开发版本 (v3.3.0) 预期性能</div>
                            <table class="performance-table">
                                <thead>
                                    <tr>
                                        <th>指标</th>
                                        <th>v3.2.1</th>
                                        <th>v3.3.0(预期)</th>
                                        <th>预期变化</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>温度RMSE</td>
                                        <td>±8.63℃</td>
                                        <td>±7.50℃</td>
                                        <td style="color: var(--success-color);">↑13.1%</td>
                                    </tr>
                                    <tr>
                                        <td>碳含量RMSE</td>
                                        <td>±0.0076%</td>
                                        <td>±0.0065%</td>
                                        <td style="color: var(--success-color);">↑14.5%</td>
                                    </tr>
                                    <tr>
                                        <td>时间准确率</td>
                                        <td>92.4%</td>
                                        <td>95.0%</td>
                                        <td style="color: var(--success-color);">↑2.8%</td>
                                    </tr>
                                    <tr>
                                        <td>推理时间</td>
                                        <td>120ms</td>
                                        <td>115ms</td>
                                        <td style="color: var(--success-color);">↓4.2%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="scripts/unified.js"></script>
    <script src="scripts/modal-dialog.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 创建新版本按钮点击事件
            const createVersionBtn = document.getElementById('create-version');
            const versionWizard = document.getElementById('version-wizard');
            const cancelWizardBtn = document.getElementById('cancel-wizard');
            
            createVersionBtn.addEventListener('click', function() {
                showFormDialog('创建新模型版本', `
                    <div class="wizard-content">
                        <div class="step-indicator">
                            <div class="step active">1. 选择基础版本</div>
                            <div class="step">2. 配置参数</div>
                            <div class="step">3. 选择数据集</div>
                            <div class="step">4. 训练模型</div>
                            <div class="step">5. 评估部署</div>
                        </div>
                        
                        <div class="form-group">
                            <label>版本名称</label>
                            <input type="text" name="version_name" value="v3.3.0" class="form-control">
                        </div>
                        
                        <div class="form-group">
                            <label>基础版本</label>
                            <select name="base_version" class="form-control">
                                <option value="v3.2.1">v3.2.1 (当前版本)</option>
                                <option value="v3.1.5">v3.1.5</option>
                                <option value="v3.0.0">v3.0.0</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label>版本描述</label>
                            <textarea name="description" class="form-control" rows="3">改进的预测模型，优化碳含量预测精度，增加异常工况检测能力。</textarea>
                        </div>
                    </div>
                    <style>
                        .wizard-content {
                            display: flex;
                            flex-direction: column;
                            gap: 20px;
                        }
                        .step-indicator {
                            display: flex;
                            margin-bottom: 15px;
                            overflow-x: auto;
                            padding-bottom: 5px;
                        }
                        .step {
                            padding: 8px 15px;
                            border-radius: 20px;
                            background-color: #f1f1f1;
                            font-size: 13px;
                            white-space: nowrap;
                            margin-right: 10px;
                        }
                        .step.active {
                            background-color: var(--primary);
                            color: white;
                        }
                    </style>
                `, function(data) {
                    showMessage(`已创建新版本 ${data.version_name}，请继续配置参数`, 'success');
                    versionWizard.style.display = 'block';
                });
            });
            
            if (cancelWizardBtn) {
                cancelWizardBtn.addEventListener('click', function() {
                    versionWizard.style.display = 'none';
                });
            }
            
            // 选项卡切换
            const tabBtns = document.querySelectorAll('.tab-btn');
            const tabContents = document.querySelectorAll('.tab-content');
            
            tabBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    // 移除所有活动状态
                    tabBtns.forEach(b => b.classList.remove('active'));
                    tabContents.forEach(c => c.style.display = 'none');
                    
                    // 添加当前活动状态
                    btn.classList.add('active');
                    const tabId = btn.getAttribute('data-tab') + '-tab';
                    document.getElementById(tabId).style.display = 'block';
                });
            });
            
            // 版本卡片点击事件
            const versionCards = document.querySelectorAll('.version-card');
            versionCards.forEach(card => {
                card.addEventListener('click', function(e) {
                    // 如果点击的是按钮，不执行
                    if (e.target.closest('.btn')) return;
                    
                    const versionNumber = this.querySelector('.version-number').textContent;
                    const versionDate = this.querySelector('.version-date').textContent;
                    const features = [];
                    
                    // 收集特性列表
                    this.querySelectorAll('.feature-item').forEach(item => {
                        features.push(item.textContent.trim());
                    });
                    
                    // 收集指标
                    const metrics = {};
                    this.querySelectorAll('.metric-item').forEach(item => {
                        const label = item.querySelector('.metric-label').textContent;
                        const value = item.querySelector('.metric-value').textContent;
                        metrics[label] = value;
                    });
                    
                    // 显示详情弹窗
                    showDetailDialog(`${versionNumber} 详情`, `
                        <div class="version-detail">
                            <div class="version-header">
                                <div>
                                    <div class="version-title">${versionNumber}</div>
                                    <div class="version-date">${versionDate}</div>
                                </div>
                                <div class="version-status ${this.querySelector('.version-status').className.split(' ')[1]}">
                                    ${this.querySelector('.version-status').textContent}
                                </div>
                            </div>
                            
                            <div class="metrics-grid">
                                ${Object.entries(metrics).map(([label, value]) => `
                                    <div class="metric-box">
                                        <div class="metric-value">${value}</div>
                                        <div class="metric-label">${label}</div>
                                    </div>
                                `).join('')}
                            </div>
                            
                            <div class="version-features">
                                <h4>版本特性</h4>
                                <ul>
                                    ${features.map(feature => `<li>${feature}</li>`).join('')}
                                </ul>
                            </div>
                            
                            <div class="version-actions">
                                <button class="btn btn-primary version-deploy">部署版本</button>
                                <button class="btn btn-secondary version-export">导出模型</button>
                            </div>
                        </div>
                        <style>
                            .version-detail {
                                display: flex;
                                flex-direction: column;
                                gap: 20px;
                            }
                            .version-header {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                padding: 15px;
                                background-color: rgba(0,0,0,0.02);
                                border-radius: 8px;
                            }
                            .version-title {
                                font-size: 20px;
                                font-weight: 600;
                                color: var(--primary-dark);
                            }
                            .version-date {
                                color: #666;
                                margin-top: 5px;
                            }
                            .version-status {
                                padding: 5px 10px;
                                border-radius: 20px;
                                font-size: 12px;
                                font-weight: 500;
                            }
                            .version-status.current {
                                background-color: rgba(76, 175, 80, 0.1);
                                color: var(--success-color);
                            }
                            .version-status.dev {
                                background-color: rgba(33, 150, 243, 0.1);
                                color: var(--info-color);
                            }
                            .metrics-grid {
                                display: grid;
                                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                                gap: 15px;
                            }
                            .metric-box {
                                padding: 15px;
                                background-color: rgba(0,0,0,0.02);
                                border-radius: 8px;
                                text-align: center;
                            }
                            .metric-box .metric-value {
                                font-size: 18px;
                                font-weight: 600;
                                color: var(--primary);
                                margin-bottom: 5px;
                            }
                            .metric-box .metric-label {
                                font-size: 12px;
                                color: #666;
                            }
                            .version-features h4 {
                                margin-bottom: 10px;
                                color: var(--primary-dark);
                            }
                            .version-features ul {
                                padding-left: 20px;
                            }
                            .version-features li {
                                margin-bottom: 8px;
                                line-height: 1.5;
                            }
                            .version-actions {
                                display: flex;
                                gap: 10px;
                                margin-top: 10px;
                            }
                        </style>
                    `, 'large');
                    
                    // 为弹窗中的按钮添加事件
                    setTimeout(() => {
                        const deployBtn = document.querySelector('.version-deploy');
                        if (deployBtn) {
                            deployBtn.addEventListener('click', function() {
                                closeModal(document.querySelector('.modal-container'));
                                showConfirmDialog('部署确认', `确定要部署${versionNumber}吗？这将替换当前生产环境中的模型。`, function() {
                                    showMessage(`${versionNumber}已成功部署到生产环境`, 'success');
                                });
                            });
                        }
                        
                        const exportBtn = document.querySelector('.version-export');
                        if (exportBtn) {
                            exportBtn.addEventListener('click', function() {
                                closeModal(document.querySelector('.modal-container'));
                                showMessage(`正在导出${versionNumber}模型文件...`, 'info');
                                setTimeout(() => {
                                    showMessage(`${versionNumber}模型文件已导出到您的下载文件夹`, 'success');
                                }, 1500);
                            });
                        }
                    }, 100);
                });
            });
            
            // 表格中按钮点击事件
            document.querySelectorAll('.table .btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const row = this.closest('tr');
                    const datasetName = row.querySelector('td:first-child').textContent;
                    
                    showMessage(`已选择数据集: ${datasetName}`, 'success');
                });
            });
            
            // 模拟实时日志更新
            const trainingLog = document.querySelector('.training-log');
            
            setInterval(function() {
                if (!trainingLog) return;
                
                const logEntry = document.createElement('div');
                logEntry.className = 'log-entry';
                
                const currentTime = new Date();
                const timeString = currentTime.toISOString().replace('T', ' ').substring(0, 19);
                
                const logTime = document.createElement('span');
                logTime.className = 'log-time';
                logTime.textContent = `[${timeString}]`;
                
                const logMessage = document.createElement('span');
                
                // 随机生成不同类型的日志消息
                const rand = Math.random();
                if (rand < 0.7) {
                    logMessage.className = 'log-info';
                    const epoch = Math.floor(Math.random() * 10) + 4;
                    const trainLoss = (0.07 - epoch * 0.005).toFixed(4);
                    const valLoss = (trainLoss * 1.1).toFixed(4);
                    logMessage.textContent = `INFO: Epoch ${epoch}/100 完成 - 训练损失: ${trainLoss}, 验证损失: ${valLoss}`;
                } else if (rand < 0.85) {
                    logMessage.className = 'log-warning';
                    logMessage.textContent = 'WARNING: 梯度爆发检测，应用梯度裁剪';
                } else if (rand < 0.95) {
                    logMessage.className = 'log-success';
                    logMessage.textContent = 'SUCCESS: 验证性能提升，保存模型检查点';
                } else {
                    logMessage.className = 'log-error';
                    logMessage.textContent = 'ERROR: 内存不足，尝试减小批量大小';
                }
                
                logEntry.appendChild(logTime);
                logEntry.appendChild(document.createTextNode(' '));
                logEntry.appendChild(logMessage);
                
                trainingLog.appendChild(logEntry);
                trainingLog.scrollTop = trainingLog.scrollHeight;
                
                // 保持日志数量合理
                if (trainingLog.children.length > 100) {
                    trainingLog.removeChild(trainingLog.children[0]);
                }
            }, 5000);
            
            // 更新训练进度
            let progress = 65;
            const progressBar = document.querySelector('.progress-bar');
            const progressStats = document.querySelector('.progress-stats span:first-child');
            const timeRemaining = document.querySelector('.progress-stats span:last-child');
            
            setInterval(function() {
                if (!progressBar || !progressStats || !timeRemaining) return;
                
                if (progress < 100) {
                    progress += 0.5;
                    progressBar.style.width = `${progress}%`;
                    progressStats.textContent = `已完成 ${Math.floor(progress)}%`;
                    
                    let hoursRemaining = 3 - Math.floor(progress / 10);
                    if (hoursRemaining < 0) hoursRemaining = 0;
                    
                    let minutesRemaining = 12 - Math.floor((progress % 10) * 6);
                    if (minutesRemaining < 0) minutesRemaining = 0;
                    
                    timeRemaining.textContent = `预计完成时间: ${hoursRemaining}小时${minutesRemaining}分钟`;
                }
            }, 10000);
        });
    </script>
</body>
</html> 